<template>
  <div>
    <Index></Index>
    <el-backtop :bottom="100">
      <div
        @mouseover="(e) => this.mOver(e)"
        @mouseout="(e) => this.mOut(e)"
        class="back_top"
      >
        <span>
          {{ this.topName }}
        </span>
      </div>
    </el-backtop>

    <div class="music music_start">
      <el-tooltip effect="light" placement="top">
        <template #content>
          <div style="text-align: center">
            <p>打赏码</p>
            <img style="width: 100px; height: 100px" src="./assets/skm.png" />
          </div>
        </template>
        <a href="javascript:;"></a>
      </el-tooltip>
    </div>
    <div class="csdn">
      <a href="https://blog.csdn.net/weixin_43723051?spm=1011.2124.3001.5343"
        >csdn</a
      >
    </div>
    <div class="back">
      <el-tooltip effect="light" placement="top">
        <template #content>
          <img style="width: 100px; height: 100px" src="./assets/fsj.png"
        /></template>
        <a href="javascript:;">微信</a>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import Index from "@/views/index/Index.vue";
import * as echarts from "echarts";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import * as rrweb from "rrweb";

export default {
  name: "App",
  components: {
    Index,
  },
  setup() {
    const topName = ref("︿");
    const store = useStore();
    const music1 = ref();
    const { push } = useRouter();
    onMounted(() => {
      startRecord();
    });
    console.log(music1, "9090");
    // //2.点击录制
    const startRecord = () => {
      //record() 方法启动录制
      //emit会监听所有的DOM的动作， 鼠标等，
      let stopFn = rrweb.record({
        emit(event) {
          setTimeout(() => {
            stopFn();
          }, 12000);
          // 用任意方式存  储 event
          store.commit("updateEvents", { event: event });
        },
        blockClass: "feng",
        blockSelector: "shang",
        recordCanvas: true,
      });
      ElMessage({
        message: "开启视频录制",
        type: "success",
      });
    };
    const mOver = (e) => {
      topName.value = "返回";
    };
    const mOut = (e) => {
      topName.value = "︿";
    };

    const stopBlack = () => {};
    // background: url("./assets/bgcc.jpg") no-repeat;

    return {
      mOver,
      topName,
      mOut,

      stopBlack,
    };
  },
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico), auto;
}

a {
  color: #409eff;
  text-decoration: none;
}
html {
  box-sizing: border-box;
  min-height: 100vh;
  background: rgba(0, 0, 0);
  background-size: 100% 100%;
  min-width: 100vh;
}

li {
  list-style: none;
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;
}
.title_bread {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-style: normal;
  font-size: 28px;
  margin: 0 0 40px 0;
}
.title_bread span:nth-child(1) {
  font-weight: 700;
}
.title_bread span:nth-child(2) {
  font-weight: 400;
}

.back_top {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background-color: #f2f5f6;
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #f23051;
  height: 40px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.back {
  position: fixed;
  bottom: 200px;
  right: 40px;
  z-index: 10;
  box-sizing: border-box;
  width: 40px;
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #f23051;
  height: 40px;
  border-radius: 40px;
  font-size: 12px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background: #fff;
}
.back a {
  display: inline-block;
  height: 100%;
  width: 100%;
  color: #f23051;
}

.csdn {
  position: fixed;
  bottom: 150px;
  right: 40px;
  z-index: 10;
  box-sizing: border-box;
  width: 40px;
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #f23051;
  height: 40px;
  border-radius: 40px;
  font-size: 14px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background: #fff;
}
.csdn a {
  display: inline-block;
  height: 100%;
  width: 100%;
  color: #f23051;
}
.music {
  position: fixed;
  bottom: 250px;
  right: 40px;
  z-index: 10;
  box-sizing: border-box;
  width: 40px;
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #f23051;
  height: 40px;
  border-radius: 40px;
  font-size: 14px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background: url("./assets/xlh1.jpg") no-repeat;
}
.music_stop {
  animation: none;
}
.music a {
  display: inline-block;
  height: 100%;
  width: 100%;
  color: #f23051;
}
.music_start {
  animation: music 10s infinite;
}
@keyframes music {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.el-message__content {
  color: green !important;
}
</style>
